<template>
    <div class="box-top">
        <div class="top-l">
            <el-input v-model="input" class="w-50" size="large" placeholder="请输入搜索关键字" />
            <div class="button">
                <el-button type="primary" class="btn" @click="shousuo">搜索</el-button>
            </div>
        </div>
        <div class="top-r">
            <div class="select">
                <el-select v-model="value1" filterable placeholder="类型" class="yy">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="select">
                <el-select v-model="value2" filterable placeholder="状态" class="yy">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="button">
                <el-button type="primary" class="btn" @click="shaoxuan">筛选</el-button>
            </div>
            <div class="addPermissions">
                <div class="button">
                    <el-button type="primary" class="btn" @click="addPermissions">新增权限</el-button>
                    <el-dialog v-model="dialogFormVisible" title="新增权限">
                        <el-form :model="form" class="hh">
                            <el-form-item label="菜单名称" :label-width="formLabelWidth">
                                <el-input v-model="form.menuname" autocomplete="off" class="ww" />
                            </el-form-item>
                            <el-form-item label="类型" :label-width="formLabelWidth">
                                <el-select v-model="form.type" placeholder="请选择" class="hw">
                                    <el-option label="菜单" value="菜单" />
                                    <el-option label="页面" value="页面" />
                                </el-select>
                            </el-form-item>
                        </el-form>


                        <el-form :model="form" class="hh">
                            <el-form-item label="菜单排序" :label-width="formLabelWidth">
                                <el-input v-model="form.sort" autocomplete="off" class="ww" />
                            </el-form-item>
                            <el-form-item label="菜单链接" :label-width="formLabelWidth">
                                <el-input v-model="form.link" autocomplete="off" class="ww" />
                            </el-form-item>
                        </el-form>



                        <el-form :model="form" class="hh">
                            <el-form-item label="权限标识" :label-width="formLabelWidth">
                                <el-input v-model="form.permissionid" autocomplete="off" class="ww" />
                            </el-form-item>
                            <el-form-item label="状态" :label-width="formLabelWidth">
                                <el-select v-model="form.states" placeholder="请选择" class="hw">
                                    <el-option label="显示" value=1 class="ww" />
                                    <el-option label="隐藏" value=0 class="ww" />
                                </el-select>
                            </el-form-item>
                        </el-form>

                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="savePermissions">
                                    保存
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>

                </div>
            </div>
        </div>
    </div>
    <div class="box-btn">
        <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
            <el-table-column prop="menuname" label="菜单名称" width="200" align="center" class="clo" />

            <el-table-column prop="type" label="类型" width="100" align="center" :filters="[
                { text: '菜单', value: '菜单' },
                { text: '页面', value: '页面' },
            ]" :filter-method="filterType" filter-placement="bottom-end">
                <template #default="scope">
                    <el-tag :type="scope.row.type === '菜单' ? '' : 'success'" disable-transitions>{{ scope.row.type
                    }}</el-tag>
                </template>
            </el-table-column>


            <el-table-column prop="status" label="状态" width="100" align="center" :filters="[
                { text: '显示', value: '显示' },
                { text: '隐藏', value: '隐藏' },
            ]" :filter-method="filterTag" filter-placement="bottom-end">
                <template #default="scope">
                    <el-tag :type="scope.row.status === '显示' ? '' : 'success'" disable-transitions>{{ scope.row.status
                    }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="sort" sortable label="排序" align="center" />

            <el-table-column prop="link" label="链接" align="center" />

            <el-table-column prop="permissionid" label="权限标识" align="center" />


            <el-table-column prop="updatetime" label="更新时间" align="center" />

            <el-table-column label="操作" align="center">
                <template #default="scope" class="middle">
                    <span class="span1" @click='edit(scope.row)'>编辑</span>
                    <span class="span1" @click="handleDel(scope.row)">删除</span>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="editFormVisible" title="修改权限">
            <el-form :model="editForm" class="hh">
                <el-form-item label="菜单名称" :label-width="formLabelWidth">
                    <el-input v-model="editForm.menuname" autocomplete="off" class="ww" />
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-select v-model="editForm.type" placeholder="请选择" class="hw">
                        <el-option label="菜单" value="菜单" />
                        <el-option label="页面" value="页面" />
                    </el-select>
                </el-form-item>
            </el-form>


            <el-form :model="form" class="hh">
                <el-form-item label="菜单排序" :label-width="formLabelWidth">
                    <el-input v-model="editForm.sort" autocomplete="off" class="ww" />
                </el-form-item>
                <el-form-item label="菜单链接" :label-width="formLabelWidth">
                    <el-input v-model="editForm.link" autocomplete="off" class="ww" />
                </el-form-item>
            </el-form>



            <el-form :model="form" class="hh">
                <el-form-item label="权限标识" :label-width="formLabelWidth">
                    <el-input v-model="editForm.permissionid" autocomplete="off" class="ww" />
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="editForm.states" placeholder="请选择" class="hw">
                        <el-option label="显示" value=1 class="ww" />
                        <el-option label="隐藏" value=0 class="ww" />
                    </el-select>
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveEdit">
                        保存
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <div style="margin-left: 20px;" id="pageall">
        <el-pagination :current-page="page.pageNum" :page-size="page.pageSize" :page-sizes="[2, 5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper" :total="totallenght" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts">

import { reactive, ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { defineComponent } from "vue";
import { ElTable, type TableColumnCtx } from 'element-plus'
import axios from 'axios'
import { useStore } from "vuex"
import { computed } from "vue";
import { fromPairs } from "lodash";



export default defineComponent({
    setup() {
        //总条数
        let totallenght = ref()
        //分页
        const page = reactive({//配置对应的查询参数
            pageNum: 1,
            pageSize: 10,
        });
        let currentPage = ref('')
        const aaa = (aa: any) => {
            var date = new Date(aa); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '/';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
            return Y + M + D + h + m + s;

        }
        var tableData: any = ref([])
        onMounted(() => {
            //任务列表
            getList()
        })
        const handleSizeChange = (val: number) => {
            page.pageSize = val
            console.log(val)
            getList()
        }
        const handleCurrentChange = (val: number) => {
            page.pageNum = val
            console.log(val)
            getList()
        }
        const store = useStore();
        const getList = () => {
            axios({
                url: 'http://1.14.73.59:8080/menu/allselect',
                method: 'post',
                params: {
                    limit: page.pageSize,
                    page: page.pageNum
                }
            }).then(resp => {
                console.log(resp.data.conut)
                tableData.value = resp.data.data
                totallenght.value=resp.data.conut
                // console.log(tableData.value)
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].updatetime = aaa(tableData.value[i].updatetime)
                    if (tableData.value[i].status == 1) {
                        tableData.value[i].status = '显示'
                    } else {
                        tableData.value[i].status = '隐藏'
                    }
                }
            });
        }
        const form = reactive({
            menuname: '',
            type: '',
            sort: '',
            link: '',
            permissionid: '',
            states: '',
            updatetime: ''
        })

        let editForm: any = ref({
            id: '',
            menuname: '',
            type: '',
            sort: '',
            link: '',
            permissionid: '',
            states: '',
            updatetime: ''
        })

        const input = ref("")
        const value1 = ref('')
        const value2 = ref('')

        let dialogFormVisible: any = ref(false)
        let editFormVisible: any = ref(false)
        const formLabelWidth = '140px'


        //搜索按钮
        const shousuo = () => {
            axios({
                url: 'http://1.14.73.59:8080/menu/nameselect',
                method: 'post',
                params: {
                    limit: page.pageSize,
                    page: page.pageNum,
                    name: input.value
                }
            }).then(resp => {
                tableData.value = resp.data.data
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].updatetime = aaa(tableData.value[i].updatetime)
                    if (tableData.value[i].status == 1) {
                        tableData.value[i].status = '显示'
                    } else {
                        tableData.value[i].status = '隐藏'
                    }
                }

            });
        }

        //筛选按刘
        const shaoxuan = () => {
            console.log(value1.value, value2.value)
            axios({
                url: 'http://1.14.73.59:8080/menu/staticselect',
                method: 'post',
                params: {
                    limit: page.pageSize,
                    page: page.pageNum,
                    stati: value2.value,
                    static: value2.value,
                    type: value1.value
                }
            }).then(resp => {
                console.log(resp.data.data)
                tableData.value = resp.data.data
                for (let i = 0; i < tableData.value.length; i++) {
                    tableData.value[i].updatetime = aaa(tableData.value[i].updatetime)
                    if (tableData.value[i].status == 1) {
                        tableData.value[i].status = '显示'
                    } else {
                        tableData.value[i].status = '隐藏'
                    }
                }
            });

        }

        //权限新增
        const addPermissions = () => {
            dialogFormVisible.value = true
        }
        //权限保存
        const savePermissions = () => {
            dialogFormVisible.value = false
            axios({
                url: 'http://1.14.73.59:8080/menu/add',
                method: 'post',
                data: {
                    menuname: form.menuname,
                    type: form.type,
                    sort: form.sort,
                    link: form.link,
                    permissionid: form.permissionid,
                    status: form.states
                }
            }).then(resp => {
                getList()
                console.log('保存')
                console.log(resp.data)
            });
        }
        //修改
        const edit = (row: any) => {
            editFormVisible.value = true
            // console.log(row)
            // console.log(row.value)
            // console.log(row.status)

            // if(row.status=='显示'){
            //     row.states='显示'
            // }else{
            //     row.status='隐藏'
            // }
            editForm.value = row
        }
        //保存修改
        const saveEdit = () => {
            editFormVisible.value = false
            // console.log(editForm.value.menuname)
            // console.log(editForm.value.type)
            // console.log(editForm.value.sort)
            // console.log(editForm.value.link)
            // console.log(editForm.value.permissionid)
            // console.log(editForm.value.states)
            axios({
                url: 'http://1.14.73.59:8080/menu/update',
                method: 'post',
                data: {
                    id: editForm.value.id,
                    menuname: editForm.value.menuname,
                    type: editForm.value.type,
                    sort: editForm.value.sort,
                    link: editForm.value.link,
                    permissionid: editForm.value.permissionid,
                    status: editForm.value.states,
                }
            }).then(resp => {
                getList()
                console.log('修改')
                console.log(resp.data)
            });

        }

        //删除
        const handleDel = (row: any) => {
            axios({
                url: 'http://1.14.73.59:8080/menu/delete',
                method: 'post',
                params: {
                    id: row.id
                }
            }).then(resp => {
                getList()
                console.log('删除')
                console.log(resp.data)
            });
        }



        const tableRef = ref<InstanceType<typeof ElTable>>()

        const resetDateFilter = () => {
            tableRef.value!.clearFilter(['date'])
        }
        // TODO: improvement typing when refactor table
        const clearFilter = () => {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            tableRef.value!.clearFilter()
        }


        const filterTag = (value: any, row: any) => {
            return row.status === value
        }

        const filterType = (value: any, row: any) => {
            return row.type === value
        }


        const options1 = [
            {
                value: '菜单',
                label: '菜单',
            },
            {
                value: '页面',
                label: '页面',
            },
        ]
        const options2 = [
            {
                value: 1,
                label: '显示',
            },
            {
                value: 0,
                label: '隐藏',
            },
        ]


        return {
            input,
            value1,
            value2,
            options1,
            options2,
            resetDateFilter,
            clearFilter,
            filterTag,
            tableData,
            filterType,
            edit,
            handleDel,
            dialogFormVisible,
            formLabelWidth,
            form,
            shousuo,
            shaoxuan,
            addPermissions,
            savePermissions,
            editForm,
            editFormVisible,
            saveEdit,
            currentPage,
            totallenght,
            page,
            handleSizeChange,
            handleCurrentChange
        }
    },
});
</script>

<style scoped>
.box-top {
    display: flex;
    justify-content: space-evenly;
    justify-content: flex-start;
    align-items: center;
}

.top-l {
    width: 340px;
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.top-r {
    width: 340px;
    display: flex;
    align-items: center;
    margin-left: 50px;
}

.select {
    margin: 0 10px;
}

.w-50 {
    height: 30px;
}

.button {
    margin-left: 10px;
}

.btn {
    height: 30px;
}

.span1 {
    font-weight: 600;
    margin: 0 5px;
    cursor: pointer;
}

.span1:nth-child(1) {
    color: #00ccff;
}

.span1:nth-child(2) {
    color: #00cc99;
}

.span1:nth-child(3) {
    color: #ff9933;
}

.span1:nth-child(4) {
    color: #ff9bd6;
}

.pagination {
    width: 400px;
    margin: 0 auto;
    margin-top: 20px;
}

.addPermissions {
    position: relative;
    left: 650px;
}


.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.hh {
    display: flex;
}

.ww {
    width: 100%;
}

.hw {
    width: 90%;
}

.yy {
    width: 120px;
}

.clo {
    background-color: #00ccff;
    color: #00cc99;
}
</style>
